<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
let leftCount = ref(0)
const emit = defineEmits(['delAll'])

leftCount = computed(() => {
  return props.list.filter((item) => !item.done).length
})

// const finshAll = () => {
//     // props.list = props.list.filter(item => item.done === true)
//     console.log(props.list,'1231')
// }
</script>

<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ leftCount }}</strong> 剩余未完成
    </span>

    <ul class="filters">
      <li>
        <a href="#/" class="selected">所有</a>
      </li>
      <li>
        <a href="#/" class="selected">未完成</a>
      </li>
      <li>
        <a href="#/" class="selected" @click="finshAll">完成</a>
      </li>
    </ul>
    <button @click="emit('delAll', true)">清空所有完成</button>
  </footer>
</template>
